<template>
  <div style="display: flex;  flex-direction: column;">
    <div style="display: flex; margin-top: -20px">
      <el-button type="primary" @click="handleAdd" style="margin-top: 15px"><i class="el-icon-circle-plus-outline"></i>添加用户</el-button>
    </div>
    <div style="display: flex; margin-top: 20px">
      <el-table :data="tableData"  height="460">
        <el-table-column fixed label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="name" label="姓名" ></el-table-column>
        <el-table-column prop="phoneNumber" label="联系电话" ></el-table-column>
        <el-table-column prop="roleId" label="角色" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.roleId == 1">管理员</el-tag>
            <el-tag v-else-if="scope.row.roleId == 2">项目负责人</el-tag>
            <el-tag v-else-if="scope.row.roleId == 3">供应商</el-tag>
            <el-tag v-else-if="scope.row.roleId == 4">主管/组长</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="启用状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                @change="handleStatusChange(scope.row)"
                :active-value="1"
                :inactive-value="0">

            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="warning" @click="handlePassword(scope.row.userId)">重置密码</el-button>
            <el-button type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDel(scope.row.userId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 800px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 15, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" :custom-class="'slide-right-dialog'">
      <div class="dialog-content">
        <div class="dialog-title">
          <span>{{form.userId ? '编辑' : '新增'}}用户</span>
        </div>
        <el-form :model="form" :rules="rules" :ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="projectNumber">
            <el-input v-model="form.username" placeholder="请输入登录用户名"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="projectNumber">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="projectNumber">
            <el-input v-model="form.phoneNumber" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色" prop="roleId">
            <el-select v-model="form.roleId" placeholder="请选择">
              <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属科室" prop="department">
            <el-input v-model="form.department" placeholder="请输入科室（非必填）"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">新增/编辑</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addUser, getUserPage} from "@/api/user";
import {deleteuser,getUserById,queryEmployeeById} from "@/api/user";



export default {
  name: 'MyComponent',
  data() {
    return {
      tableData: [],
      roleId: 0,
      department: '',
      pageNum: 1,
      total: 0,
      pageSize: 10,
      dialogFormVisible: false,
      roleOptions: [
          {label: '管理员',value: 1 },
          {label: '项目负责人',value: 2},
          {label: '供应商', value: 3},
          {label: '主管',value: 4 }
      ],
      form: {
        user_id: '',
        username:'',
        password:'',
        name:'',
      },
      statusOptions: [
        {label: '是', value: 1},
        {label: '否', value: 0},
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {//初始化页面
      getUserPage(this.pageNum, this.pageSize, this.roleId, this.department)
          .then(res => {
            this.tableData = res.records;
            this.total = res.total;
          })
          .catch(err => {
            this.$message.error('请求出错了');
          });
    },
    handleStatusChange(row){
      addUser(row).then(res => {
        if(res) {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    handleSizeChange(val) {//改变页码
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {//改变每页显示条数
      this.pageNum = val;
      this.init();
    },
    handleAdd() {//处理添加
      this.dialogFormVisible=true
      this.form={
        status: 1,
      }
    },
    handleEdit(row) {//编辑
      this.form = row;
      this.dialogFormVisible = true
    },
    handlePassword(row) { //重置密码
      this.$confirm('确定重置该用户的密码为123456吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        addUser({userId: row, password: 'e10adc3949ba59abbe56e057f20f883e'}).then(res => {
          if (!res) {
            this.$message.success('重置密码成功')
          } else {
            this.$message.error('重置密码失败')
          }
        })
      }).catch(() => {
        // 用户取消删除时的操作
        this.$message.info('重置已取消')
      });
    },
    // 删除用户
    handleDel(id) {
      this.$confirm('确定要删除这个用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteuser(id).then(res => {
              // 假设后端返回了一个对象，其中有一个属性表示操作是否成功
              // 你需要根据后端API的实际响应来调整这个条件判断
              if (res) {
                this.$message.success('删除成功')
                this.init()
              } else {
                // 如果后端返回了错误信息，可以在这里显示出来
                const errorMessage = res ? res.message : '未知错误';
                this.$message.error('操作失败: ' + errorMessage);
              }
            })
      }).catch(() => {
        // 用户取消删除时的操作
        this.$message.info('删除已取消')
      });
    },
    save() {//确定
      addUser(this.form).then(res => {
        if(res) {
          this.$message.success('添加或编辑成功')
          this.dialogFormVisible=false
          this.init()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
  }
};
</script>

<style scoped>
>>> .slide-right-dialog {
  top: -150px;
  right: 0;
  margin: 0;
  position: absolute;
  height: 2000px;
  width: 600px;
  animation: slide-right 0.3s ease;
}

>>> .slide-right-dialog .el-dialog__title {
  font-size: 20px; /* 调整对话框正文内容的字体大小 */
}
</style>
